<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form ref="formRef" :rules="rules" size="small" :model="query" layout="inline">
        <a-form-item label="日期" prop="beginDate">
          <a-date-picker
            popup-container="html"
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择日期"
            class="bacClass"
          />至
          <a-date-picker
            popup-container="html"
            v-model="query.enginDate"
            :style="{ width: '180px' }"
            placeholder="选择日期"
            class="bacClass"
          />
        </a-form-item>
        <a-form-item label="厂区" prop="planOrderCode" field="planOrderCode">
          <FactoryCascader :configCascader="configCascader" @changeCascader="changeCascader" />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
      <div style="width: 65%; height: 100%">
        <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
      </div>
      <div style="width: 35%; height: 100%">
        <AgGridVuesCopys
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          :rowHeight="30"
          :headerHeight="30"
          @grid-ready="gridReady"
          style="height: 100%"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="tableDataList"
          :columnDefs="tc"
          :localeText="localeText1"
        >
        </AgGridVuesCopys>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import FactoryCascader from '@/components/FactoryCascade/index.vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)
  const rules = reactive({
    planOrderCode: [{ required: true, message: '请选择厂区', trigger: 'change' }],
  })
  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId } = data
    query.planOrderCode = corporateId
  }

  //getlist初始化接口参数
  let query: any = reactive({
    beginDate: dayjs().format('YYYY-MM-DD'), //当天日期
    enginDate: dayjs().format('YYYY-MM-DD'),
    // enginDate: formatDateTime(new Date(Number(new Date().getTime()) + (60 * 1000 * 60 * 24 * 7)), 'yyyy-MM-dd'),
    planOrderCode: 32,
  })
  function formatDateTime(date: any, format: any) {
    const o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      S: date.getMilliseconds(), // 毫秒
      a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
      A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    }
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
        )
      }
    }
    return format
  }

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
  }

  const tc = [
    {
      headerName: '日期',
      field: 'date',
      width: 150,
    },
    {
      headerName: '拆纱重量/吨',
      field: 'disassemble',
      width: 150,
    },
    {
      headerName: '拆纱人均重量',
      field: 'disassembleAvgWeight',
      width: 150,
    },
    {
      headerName: '卸纱重量/吨',
      field: 'wms',
      width: 150,
    },
    {
      headerName: '卸纱人均重量',
      field: 'wmsAvgWeight',
      width: 150,
    },
    {
      headerName: '机修台数/台',
      field: 'adjustment',
      width: 150,
    },
    {
      headerName: '机修人均台数',
      field: 'adjustmentAvg',
      width: 150,
    },
  ]

  const option = ref({
    title: {
      text: '--厂辅助工(拆纱卸纱机修)效率',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['拆纱重量/吨', '卸纱重量/吨', '机修台数/台'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7'],
      axisLabel: {
        inside: false,
        textStyle: {
          fontSize: '14',
        },
        padding: [5, 0, 0, -5], //文字左右定位
      },
    },
    yAxis: {
      type: 'value',
      splitNumber: 10,
    },
    series: [
      {
        name: '拆纱重量/吨',
        type: 'line',
        data: [20, 25, 62, 47, 12, 57, 69],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨', fontSize: 16 },
        symbolSize: 15,
        lineStyle: {
          width: 8,
        },
      },
      {
        name: '卸纱重量/吨',
        type: 'line',
        data: [57, 63, 48, 25, 14, 19, 63],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨', fontSize: 16 },
        symbolSize: 15,
        lineStyle: {
          width: 8,
        },
      },
      {
        name: '机修台数/台',
        type: 'line',
        data: [20, 34, 62, 24, 18, 64, 47],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}', fontSize: 16 },
        symbolSize: 15,
        lineStyle: {
          width: 8,
        },
      },
    ],
  })

  //初始化
  onMounted(async () => {
    selectJt()
  })
  const myChart: any = ref()
  const states = () => {
    return echarts.init(myChart.value!)
  }
  const formRef = ref<any>(null)
  async function selectJt() {
    const valid = await formRef.value.validate()
    if (valid) return
    post({
      url: 'planSingle/report/getAuxiliaryEfficiency',
      data: {
        firmId: query.planOrderCode, //公司ID
        dateStart: query.beginDate,
        dateEnd: query.enginDate,
      },
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data
        option.value.xAxis.data = res.data.map((o: any) => {
          return o.date.split('-')[1] + '/' + o.date.split('-')[2]
        })
        option.value.series[0].data = res.data.map((o: any) => {
          return o.disassemble
        })
        option.value.series[1].data = res.data.map((o: any) => {
          return o.wms
        })
        option.value.series[2].data = res.data.map((o: any) => {
          return o.adjustment
        })
        const state = states()
        state.setOption(option.value)
      } else {
        Message.error(res.message)
      }
    })
  }

  const getList = () => {
    selectJt()
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'ClothWarehouseIntoStorage',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
